<template>
  <div>
    <h1>{{qq}}</h1>
    <h1>{{qq}}</h1>
    <h1>{{qq}}</h1>
    <h1>{{qq}}</h1>
    <input
      type="text"
      v-model="qq"
    >
  </div>
</template>
<script>
// @ is an alias to /src
//  vue2 响应式的核心原理就是利用  Object.defineProperty 把data中的属性进行了劫持
/* 
  指令 就是vue规定的v-xxx的行内属性
  v-model 用在表单元素上 input  select  textarea 


  先进行数据的劫持， 每一个属性都会有一个get和一个set,还有一个dep实例(负责存储使用这个属性的那个Watcher实例)
  每当用有地方使用对应的属性的时候 就会创建一个watcher实例存储到 对应得dep的subs中

  每当我们去修改这个属性的时候  他会触发set函数，set函数执行的时候 会触发 dep的notify方法
    dep的notify方法 会循环执行subs中的各个watcher的update方法 来做对应的更新
*/
export default {
  data() {
    // 为什么data必须是一个函数； 为了保证数据的独立性
    return {
      qq: 12346, //  new Dep()  -> dep  subs:[]   addSub  notify
      ww: 34535,
    };
  },
};
</script>
<style lang="less">
</style>